<template>
  <div class="exchangePAge">
    <div style="color: #101010; font-weight: 600">积分商城列表</div>
    <div style="margin-bottom: 15px; display: flex; justify-content: flex-end">
      <el-button type="primary" @click="addExchangeGoods()">创建奖品</el-button>
    </div>
    <div>
      <el-table :data="addGoodsList" border style="width: 100%">
        <el-table-column
          label="ID"
          type="index"
          :index="indexMethod"
          align="center"
        />
        <el-table-column
          prop="orderList"
          label="商城排序"
          width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="orderNo"
          label="轮播排序"
          width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="prizeName"
          label="奖品名称"
          width="210"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="type" label="奖品类型" width="80" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 1">实物奖</span>

            <span v-else-if="scope.row.type == 3">虚拟奖</span>
            <span v-else-if="scope.row.type == 4">积分奖</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="onlineTime"
          label="开始时间"
          width="100"
          :formatter="formatterTime"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="offlineTime"
          label="结束时间"
          width="100"
          :formatter="formatterTime"
        >
        </el-table-column>
        <el-table-column
          prop="total"
          label="剩余库存"
          width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="sendCount"
          label="已兑数量"
          width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="上架/下架"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.status == 1">上架</span>
            <span v-else>下架</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="400" align="center">
          <template slot-scope="scope">
            <el-button
              v-no-more-click
              v-if="scope.row.isList"
              @click="doneGoods(scope.row)"
              type="warning"
              size="mini"
              >商城关闭</el-button
            >
            <el-button
              v-no-more-click
              v-else
              @click="controlGoods(scope.row)"
              type="success"
              size="mini"
              >商城展示</el-button
            >

            <el-button
              v-no-more-click
              v-if="!scope.row.isHome"
              @click="homeDisplay(scope.row)"
              type="success"
              size="mini"
              >主页展示</el-button
            >

            <el-button
              v-no-more-click
              v-else
              @click="homeShelf(scope.row)"
              type="warning"
              size="mini"
              >主页关闭</el-button
            >
            <el-button
              type="primary"
              size="mini"
              @click="editAddGoods(scope.row)"
              >编辑</el-button
            >
            <el-button @click="deleteGoods(scope.row)" type="danger" size="mini"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 30px">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="totalPage"
          background
        ></el-pagination>
      </div>
    </div>
    <integralAdd
      v-if="addOrEdit == 1"
      :addOrEdit="addOrEdit"
      @getAddGoodsList="getAddGoodsList"
    ></integralAdd>
    <integralEdit
      v-if="addOrEdit == 2"
      :editGoodsCont="editGoodsCont"
      :addOrEdit="addOrEdit"
      @getAddGoodsList="getAddGoodsList"
    ></integralEdit>
  </div>
</template>
<script>
import integralAdd from "./integralAdd.vue";
import integralEdit from "./integralEdit.vue";
import requestAxios from "../../../http";
export default {
  name: "addGoodsPage",
  components: {
    integralAdd,
    integralEdit,
  },
  data() {
    return {
      gooodsLisr: [], // 商品分类
      addOrEdit: false, //添加新的商品还是编辑
      editGoodsCont: null, //编辑的商品信息
      addGoodsList: [],
      pageNum: 1,
      pageSize: 10,

      totalPage: 0,
      options: [
        {
          value: 0,
          label: "下架",
        },
        {
          value: 1,
          label: "上架",
        },
      ],
      statusValue: null,
    };
  },
  mounted() {
    this.getAddGoodsList();
  },
  computed: {},
  //监听执行
  watch: {},

  methods: {
    indexMethod(index) {
      return (this.pageNum - 1) * this.pageSize + index + 1;
    },
    // 时间 时分秒去掉
    formatterTime(row, column) {
      let data = row[column.property];
      return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data);
    },
    //添加新的兑换商品
    addExchangeGoods() {
      this.addOrEdit = 1;
    },
    //编辑加购商品
    editAddGoods(item) {
      console.log(item, "1111111111111111111");
      this.addOrEdit = 2;
      this.editGoodsCont = JSON.parse(JSON.stringify(item));
    },
    //获取加购商品信息
    getAddGoodsList() {
      requestAxios
        .fetchPost(
          "/api/v2.1/exchange/store/management/exchangeStore/list?pageNum=" +
            this.pageNum +
            "&pageSize=" +
            this.pageSize,
          {
            headers: {},
          }
        )
        .then((data) => {
          if (data.status == 200 && data.data.success) {
            console.log("积分商城列表", data.data);
            this.addGoodsList = data.data.data.aaData;
            this.totalPage = data.data.data.iTotalDisplayRecords;
            // console.log( that.totalPage,"22322222200");
            // this.pageNum = data.data.data.lastPage;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //改变当前页数
    handleCurrentChange(val) {
      this.pageNum = val;
      console.log(`当前页: ${this.pageNum}`);
      this.getAddGoodsList();
    },
    //商城关闭
    doneGoods(item) {
      console.log("新增信息确认2", item);
      let obj = null;
      obj = {
        isList: 0,
        id: item.id,
      };
      requestAxios
        .fetchPost(
          "/api/v2.1/exchange/store/management/exchangeStore/update/fast/",
          obj,
          {
            headers: {},
          }
        )
        .then((data) => {
          if (data.status == 200 && data.data.success) {
            console.log("新增兑换商品结果", data.data);
            //新增成功
            this.getAddGoodsList();
            this.tip(true, "商城关闭成功!");
          } else {
            console.log("删除加购商品", data.data);
            this.tip(false, data.data.errorMsg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //商城展示
    controlGoods(item) {
      console.log("新增信息确认2", item);
      let obj = null;
      obj = {
        isList: 1,
        id: item.id,
      };
      requestAxios
        .fetchPost(
          "/api/v2.1/exchange/store/management/exchangeStore/update/fast/",
          obj,
          {
            headers: {},
          }
        )
        .then((data) => {
          if (data.status == 200 && data.data.success) {
            console.log("新增兑换商品结果", data.data);
            //新增成功
            this.getAddGoodsList();
            this.tip(true, "商城展示成功!");
          } else {
            console.log("删除加购商品", data.data);
            this.tip(false, data.data.errorMsg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //主页关闭
    homeShelf(item) {
      console.log("新增信息确认2", item);
      let obj = null;
      obj = {
        isHome: 0,
        id: item.id,
      };
      requestAxios
        .fetchPost(
          "/api/v2.1/exchange/store/management/exchangeStore/update/fast/",
          obj,
          {
            headers: {},
          }
        )
        .then((data) => {
          if (data.status == 200 && data.data.success) {
            console.log("新增兑换商品结果", data.data);
            //新增成功
            this.getAddGoodsList();
            this.tip(true, "主页关闭成功!");
          } else {
            console.log("删除加购商品", data.data);
            this.tip(false, data.data.errorMsg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //主页展示
    homeDisplay(item) {
      console.log("新增信息确认2", item);
      let obj = null;
      obj = {
        isHome: 1,
        id: item.id,
      };
      requestAxios
        .fetchPost(
          "/api/v2.1/exchange/store/management/exchangeStore/update/fast/",
          obj,
          {
            headers: {},
          }
        )
        .then((data) => {
          if (data.status == 200 && data.data.success) {
            console.log("新增兑换商品结果", data.data);
            //新增成功
            this.getAddGoodsList();
            this.tip(true, "主页展示成功!");
          } else {
            console.log("删除加购商品", data.data);
            this.tip(false, data.data.errorMsg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //删除加购商品
    deleteGoods(item) {
      console.log("删除某个兑换商品", item);
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteConfirm(item.id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    deleteConfirm(id) {
      requestAxios
        .fetchPost(
          "/api/v2.1/exchange/store/management/exchangeStore/del/" + id,
          {
            headers: {},
          }
        )
        .then((data) => {
          if (data.status == 200 && data.data.success) {
            console.log("删除兑换商品", data.data);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            let totalPage = Math.ceil((this.totalPage - 1) / this.pageSize);
            let currengpage =
              this.pageNum > totalPage ? totalPage : this.pageNum;
            this.pageNum = currengpage < 1 ? 1 : currengpage;
            console.log(this.pageNum);
            this.getAddGoodsList();
          } else {
            console.log("删除加购商品", data.data);
            this.tip(false, data.data.errorMsg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //提示的通用方法
    tip(state, text) {
      if (state) {
        this.$message({
          showClose: true,
          message: text,
          type: "success",
        });
      } else {
        this.$message({
          showClose: true,
          message: text,
          type: "error",
        });
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
